<template>
  <div class="my">
    <van-card
      style="
        background-color: white;
        height: 90px;
        padding-top: 20px;
        overflow: hidden;
      "
    >
      <template #thumb>
        <div class="img">
          <img
            style="
              width: 50px;
              height: 50px;
              border-radius: 50%;
              margin-left: 100px;
            "
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F15%2F20171215221023_KiYWM.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626702406&t=fc8538224d3056cb8f6416ba37fb6329"
            alt=""
          />
        </div>
      </template>
      <template #title>
        <div class="title">
          <h3>木舟<van-icon name="gem" /></h3>
        </div>
      </template>
      <template #desc>
        <div class="title">
          <span>VIP会员</span>
        </div>
      </template>
    </van-card>
    <div
      style="
        background-color: white;
        height: 70px;
        padding-top: 20px;
        overflow: hidden;
        border-top: 1px solid #e5e5e5;
      "
    >
      <div class="jifen">
        <div
          style="
            float: left;
            margin-right: 10px;
            height: 50px;
            margin-top: 15px;
          "
        >
          <van-icon name="bookmark" />
        </div>
        <div>
          <span>三积分待领取</span><br />
          <span>点击立即领取 ></span>
        </div>
      </div>
      <div class="vip">
        <div
          style="float: left
            float: left;
            margin-right: 10px;
            height: 50px;
            margin-top: 15px;
          "
        >
          <van-icon name="gem" />
        </div>
        <div>
          <span>会员中心</span><br />
          <span>送你两个月vip</span>
        </div>
      </div>
    </div>
    <!-- 喜欢、最近、本地、已购、关注 -->
    <div class="pic">
      <div>
        <van-icon name="like" /><br />
        <span>喜欢</span>
      </div>
      <div>
        <van-icon name="clock" /><br />
        <span>最近</span>
      </div>
      <div>
        <van-icon name="bag" /><br />
        <span>本地</span>
      </div>
      <div>
        <van-icon name="checked" /><br />
        <span>已购</span>
      </div>
      <div>
        <van-icon name="star" /><br />
        <span>关注</span>
      </div>
    </div>
    <!-- 导航栏 -->
    <van-tabs class="songlist">
      <van-tab title="自建歌单">
        <van-contact-card type="add" add-text="新建歌单" />
      </van-tab>
      <van-tab title="收藏歌单">没有收藏歌单</van-tab>
      <van-tab title=""></van-tab>
      <van-tab title=""></van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data: () => ({}),
  methods: {
  }
}
</script>
<style lang="less" scoped>
.my {
  .title {
    margin-left: 60px;
    margin-top: -10px;
  }
  .jifen {
    float: left;
    width: 50%;
    div {
      margin-left: 20px;
    }
  }
  .vip {
    float: left;
    text-align: left;
    width: 50%;
    div {
      margin-left: 40px;
    }
  }
  .pic {
    margin-top: 10px;
    .van-icon {
      color: green;
      font-size: 20px;
    }
    div {
      float: left;
      font-size: 12px;
      margin-left: 40px;
      margin-top: 10px;
    }
  }
  .songlist {
    margin-top: 80px;
  }
}
</style>
